<template>
  <div class="data-table-container">
    <!-- 表格容器 -->
    <div class="table-wrapper" :class="{ 'fixed-header': fixedHeader, 'scrollable': scrollable }">
      <el-table ref="tableRef" v-bind="$attrs" :class="tableClass" class="styled-table" stripe
        :height="fixedHeader ? height : undefined" :max-height="!fixedHeader ? maxHeight : undefined"
        @selection-change="handleSelectionChange" @sort-change="handleSortChange" @row-click="handleRowClick">
        <!-- 传递所有插槽 -->
        <template v-for="(_, name) in $slots" #[name]="slotData">
          <slot :name="name" v-bind="slotData" />
        </template>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

/**
 * 组件属性定义
 */
interface Props {
  /** 表格大小 */
  size?: 'large' | 'default' | 'small'
  /** 是否显示边框 */
  border?: boolean
  /** 表格主题 */
  theme?: 'default' | 'modern' | 'minimal'
  /** 是否固定表头 */
  fixedHeader?: boolean
  /** 是否启用滚动 */
  scrollable?: boolean
  /** 表格固定高度（用于固定表头） */
  height?: string | number
  /** 表格最大高度 */
  maxHeight?: string | number
}

/**
 * 排序信息接口
 */
interface SortInfo {
  column: Record<string, unknown> | null
  prop: string | null
  order: 'ascending' | 'descending' | null
}

/**
 * 事件定义
 */
interface Emits {
  /** 选择项变化事件 */
  (e: 'selection-change', selection: Record<string, unknown>[]): void
  /** 排序变化事件 */
  (e: 'sort-change', sortInfo: SortInfo): void
  /** 行点击事件 */
  (e: 'row-click', row: Record<string, unknown>, column: Record<string, unknown>, event: Event): void
}

// 定义属性和事件
const props = withDefaults(defineProps<Props>(), {
  size: 'default',
  border: false,
  theme: 'modern',
  fixedHeader: true,
  scrollable: true,
  height: '400px',
  maxHeight: '400px'
})

const emit = defineEmits<Emits>()

/**
 * el-table 引用
 */
const tableRef = ref()

/**
 * 暴露 el-table 实例
 */
defineExpose({
  getTableRef: () => tableRef.value
})

/**
 * 计算表格样式类名
 */
const tableClass = computed(() => {
  return [
    `table-${props.theme}`,
    `table-size-${props.size}`,
    {
      'table-bordered': props.border
    }
  ]
})

/**
 * 处理选择变化
 */
const handleSelectionChange = (selection: Record<string, unknown>[]) => {
  emit('selection-change', selection)
}

/**
 * 处理排序变化
 */
const handleSortChange = (sortInfo: SortInfo) => {
  emit('sort-change', sortInfo)
}

/**
 * 处理行点击
 */
const handleRowClick = (row: Record<string, unknown>, column: Record<string, unknown>, event: Event) => {
  emit('row-click', row, column, event)
}
</script>

<style lang="scss" scoped>
.data-table-container {
  .table-wrapper {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    // box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    // border: 1px solid #f0f0f0;

    // 当启用固定表头时，确保容器不会干扰表格的滚动行为
    &.fixed-header {
      overflow: visible;
    }

    // 自定义滚动条样式
    &.scrollable {
      .styled-table {
        :deep(.el-table__body-wrapper) {

          // 自定义滚动条样式
          &::-webkit-scrollbar {
            width: 6px;
          }

          &::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
          }

          &::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;

            &:hover {
              background: #a8a8a8;
            }
          }
        }
      }
    }

    .styled-table {

      // 基础表格样式重置
      :deep(.el-table__header-wrapper) {
        .el-table__header {
          th {
            background-color: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            color: #475569;
            font-weight: 600;
            font-size: 14px;
            padding: 16px 12px;

            .cell {
              padding: 0 8px;
            }
          }
        }
      }

      :deep(.el-table__body-wrapper) {
        .el-table__body {
          tr {
            transition: all 0.2s ease;

            &:hover {
              background-color: #f8fafc;
            }

            td {
              border-bottom: 1px solid #f1f5f9;
              padding: 16px 12px;
              color: #334155;
              font-size: 14px;

              .cell {
                padding: 0 8px;
                line-height: 1.5;
              }
            }

            &.el-table__row--striped {
              background-color: #fafbfc;

              &:hover {
                background-color: #f1f5f9;
              }
            }
          }
        }
      }

      // 选择框样式
      :deep(.el-checkbox) {
        .el-checkbox__input {
          .el-checkbox__inner {
            border-color: #d1d5db;
            border-radius: 4px;

            &:hover {
              border-color: #607AFB;
            }
          }

          &.is-checked {
            .el-checkbox__inner {
              background-color: #607AFB;
              border-color: #607AFB;
            }
          }
        }
      }

      // 排序图标样式
      :deep(.caret-wrapper) {
        .sort-caret {
          &.ascending {
            border-bottom-color: #607AFB;
          }

          &.descending {
            border-top-color: #607AFB;
          }
        }
      }
    }

    // 现代主题
    &.table-modern {
      .styled-table {
        :deep(.el-table__header-wrapper) {
          .el-table__header {
            th {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              color: white;
              border: none;

              &:first-child {
                border-top-left-radius: 12px;
              }

              &:last-child {
                border-top-right-radius: 12px;
              }
            }
          }
        }

        :deep(.el-table__body-wrapper) {
          .el-table__body {
            tr {
              &:hover {
                background: linear-gradient(90deg, rgba(96, 122, 251, 0.05) 0%, rgba(96, 122, 251, 0.02) 100%);
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(96, 122, 251, 0.1);
              }
            }
          }
        }
      }
    }

    // 最小化主题
    &.table-minimal {
      box-shadow: none;
      border: none;

      .styled-table {
        :deep(.el-table__header-wrapper) {
          .el-table__header {
            th {
              background-color: transparent;
              border-bottom: 2px solid #e2e8f0;
              font-weight: 500;
            }
          }
        }

        :deep(.el-table__body-wrapper) {
          .el-table__body {
            tr {
              td {
                border-bottom: 1px solid #f1f5f9;
              }

              &:last-child {
                td {
                  border-bottom: none;
                }
              }
            }
          }
        }
      }
    }

    // 尺寸变体
    &.table-size-small {
      .styled-table {
        :deep(.el-table__header-wrapper) {
          .el-table__header {
            th {
              padding: 12px 8px;
              font-size: 13px;
            }
          }
        }

        :deep(.el-table__body-wrapper) {
          .el-table__body {
            tr {
              td {
                padding: 12px 8px;
                font-size: 13px;
              }
            }
          }
        }
      }
    }

    &.table-size-large {
      .styled-table {
        :deep(.el-table__header-wrapper) {
          .el-table__header {
            th {
              padding: 20px 16px;
              font-size: 15px;
            }
          }
        }

        :deep(.el-table__body-wrapper) {
          .el-table__body {
            tr {
              td {
                padding: 20px 16px;
                font-size: 15px;
              }
            }
          }
        }
      }
    }

    // 边框变体
    &.table-bordered {
      .styled-table {
        :deep(.el-table__header-wrapper) {
          .el-table__header {
            th {
              border-right: 1px solid #e2e8f0;

              &:last-child {
                border-right: none;
              }
            }
          }
        }

        :deep(.el-table__body-wrapper) {
          .el-table__body {
            tr {
              td {
                border-right: 1px solid #f1f5f9;

                &:last-child {
                  border-right: none;
                }
              }
            }
          }
        }
      }
    }
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .data-table-container {
    .table-wrapper {
      background-color: #1f2937 !important;
      border-color: #374151 !important;

      .styled-table {

        // 统一表格背景，避免白底
        :deep(.el-table) {
          background-color: transparent !important;
        }

        :deep(.el-table__header-wrapper) {
          .el-table__header {
            th {
              background-color: #111827;
              border-bottom-color: #374151;
              color: #f9fafb;
            }
          }
        }

        :deep(.el-table__body-wrapper) {
          background-color: #1f2937 !important;

          .el-table__body {
            background-color: #1f2937 !important;

            tr {
              &:hover {
                background-color: #374151;
              }

              td {
                background-color: #1f2937 !important;
                border-bottom-color: #374151;
                color: #e5e7eb;
              }

              &.el-table__row--striped {
                background-color: #1f2937;

                &:hover {
                  background-color: #374151;
                }
              }
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .data-table-container {
    .table-wrapper {
      border-radius: 8px;

      .styled-table {
        :deep(.el-table__header-wrapper) {
          .el-table__header {
            th {
              padding: 12px 8px;
              font-size: 13px;
            }
          }
        }

        :deep(.el-table__body-wrapper) {
          .el-table__body {
            tr {
              td {
                padding: 12px 8px;
                font-size: 13px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
